import {useCallback, useMemo, useState, useTransition} from "react";
import News from "./component/News";
import About from "./component/About";
import Home from "./component/Home";

//现在要做的就是让切换的tab以后的渲染不要影响切换tab本身的工作
export default function TabView() {
  // pending ---> 代表当前是否有transition任务在执行
  // startTransition(fn) ---> 代表开启一个transition任务
  const [pending, startTransition] = useTransition();
  // home news about 三个页面代表开启一个transition任务
  const [presentActiveTab, setPresentActiveTab] = useState("home");

  const tabs = useMemo(() => {
    return [
      {
        key: 'home',
        label: '首页',
        compontent: <Home/>
      },
      {
        key: 'news',
        label: '新闻页面',
        compontent: <News/>
      },
      {
        key: 'about',
        label: '关于我们',
        compontent: <About/>
      }
    ]
  }, []); // 如果没有这个依赖的话这个tabs是不是永远不变了？ 是
  const changeTab = useCallback((tab) => {
    // setPresentActiveTab(tab)
    // react底层内部源码区分的
    // 变为一个transition工作， transition工作是低优先级的 他不会阻塞用户的交互 也不会让页面失去响应
    // 等到下一节课 再讲一个useTransition案例 大概就明白了useTransition 的用途了 即使你不是很懂优先级
    // hooks的底部是用环形链表 useState
    startTransition(() => setPresentActiveTab(tab))
  }, [])

  const presentComponent = useMemo(() => {
    return tabs.find(tabObj => tabObj.key === presentActiveTab).compontent
  }, [presentActiveTab])
  return (
    <div>
      {/*这个和http加载是有天壤之别的 这个你可以理解为正在渲染中*/}
      {pending ? "正在loading工作" : null}
      {/*1.展示tab 2.切换tab渲染不同的页面  */}
      {
        tabs.map(tabObj => {
          return (
            <button onClick={() => changeTab(tabObj.key)}>{tabObj.label}</button>
          )
        })
      }
      {presentComponent}
    </div>
  )
}

// 下节课再讲一个useTransition的案例 就更加明白useTransition 是干嘛的有啥用处

// 优先级没必要纠结